<template>
  <div class="analyse-page" :style="siteContentViewHeight">
    <!-- 左侧客群导航 -->
    <div class="analyse-navbar-wrap">
      <div class="nav-btn nav-btn__1" :class="{ 'is-active': analyseName === 'fast' }" @click="changeGroup('fast')">
        <span> 快速响应分析 </span>
      </div>
      <div class="nav-btn nav-btn__2" @click="changeGroup('async')" :class="{ 'is-active': analyseName === 'async' }">
        异步响应分析
      </div>
    </div>
    <analyse-fast v-if="analyseName === 'fast'" ref="fastAnalyse"></analyse-fast>
    <analyse-async v-if="analyseName === 'async'" ref="asyncAnalyse"></analyse-async>
  </div>
</template>

<script>
import analyseFast from './analyse-fast'
import analyseAsync from './analyse-async'
export default {
  name: 'AnalysePage',
  components: { analyseFast, analyseAsync },
  computed: {
    siteContentViewHeight() {
      return { height: this.$store.getters['common/siteContentViewHeight'] + 'px' }
    }
  },
  data() {
    return {
      analyseName: ''
    }
  },
  mounted() {
    this.changeGroup('fast')
  },
  methods: {
    changeGroup(analyseName) {
      // 改变分组
      this.analyseName = analyseName
      this.$nextTick(() => this.$refs[`${this.analyseName}Analyse`].getResults())
    }
  }
}
</script>

<style lang="scss">
@import './analyse-page.scss';
</style>
